<template>
	<view class="mainPage">
		<view class="cu-bar search" :style="{ backgroundColor: barStyle.backColor, color: barStyle.textColor }">
			<x-city />
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="search.keywords" type="text" placeholder="搜索技师" confirm-type="search" @input="searchList" />
			</view>
		</view>
		<view class="padding" v-if="list.length>0">
			<technician-item class="margin-bottom-sm" v-for="(item, index) in list" :key="index" :item="item"/>
		</view>
		<view class="vh-100 flex flex-direction justify-center" v-else>
			<emptyData type="notData" text="暂无技师"></emptyData>
		</view>

		<loading v-if="pageLoading" />

		<x-tabbar page="/pages/technician/index" />
	</view>
</template>

<script>
import {debounce} from '@/utils/functions';
import technicianItem from './modules/item';
let debounceGetList;
export default {
	components: { technicianItem },
	data() {
		return {
			pageLoading: false,
			barStyle: {
				backColor: '',
				textColor: '#ffffff'
			},
			search: {
				page: 1,
				keywords: '',
			},
			list: []
		};
	},
	onLoad() {
		let location = uni.getStorageSync('location');
		this.search.lat = location.lat;
		this.search.lng = location.lng;
		this.getList();
		debounceGetList=debounce(()=>{this.getList()}, 300);
		uni.$on('x-city-change',this.searchList);
	},
	unLoad(){
		uni.$off('x-city-change',this.searchList);
	},
	onShow(){
		uni.hideTabBar();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		getList() {
			if (this.pageLoading) return;
			this.pageLoading = true;
			this.$utils.$api.Technician.list(this.search).then(data => {
				this.list = [...this.list, ...data.data];
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		searchList() {
			this.search.page = 1;
			this.list = [];
			debounceGetList();
		},
		collect(item){
			this.$utils.$api.Collect.technician(item.technician_id).then((data)=>{
				item.is_collect=data.state;
			}).catch(err=>{
				this.$utils.$message.error(err.msg);
			})
		}
	},
	onPageScroll(event) {
		let scrollTop = event.scrollTop
		let color = Math.round(Math.round(scrollTop) / 100) * 255;
		let alpha = Math.round(scrollTop) / 100;

		color = color >= 255 ? 255 : color
		alpha = alpha >= 1 ? 1 : alpha

		this.barStyle.textColor = `rgb(${255 - color},${255 - color},${255 - color})`;
		this.barStyle.backColor = `rgba(255,255,255,${alpha})`;
	}
}
</script>
<style lang="less" scoped>

</style>
